<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>演示服务</title>
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/axios.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >

<div  class="container mt-4" id="app">
   <!--   显示OCR识别的图片-->
   <img th:src="${serverImgUrl}" />
   <p>==========   OCR 识别区域 [ <span >{{totalTime}}</span> ms]============ <a href="./verify">返回</a></p>
<!--   <span th:text="${imgPath}"></span>-->
   <input type="text"  ref="imgPathId"  th:value="${imgPath}" style="display:none">
<!--   <button type="button" class="btn btn-primary" @click="ocrRec(1)" :style="ocrButtonShow">OCR识别计算1</button>-->
   <button type="button" class="btn btn-info"   @click="ocrRec(2)" :style="ocrButtonShow">OCR识别计算(原生）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(3)" :style="ocrButtonShow">火车票识别解析Demo</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(4)" :style="ocrButtonShow">火车票识别解析(多版融合）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(6)" :style="ocrButtonShow">火车票识别解析(多张上下版）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(7)" :style="ocrButtonShow">识别发票类型(单张）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(8)" :style="ocrButtonShow">发票识别(单张-综合）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(9)" :style="ocrButtonShow">全电子发票(普通)</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(31)" :style="ocrButtonShow">发票分区（坐标）</button>
   <button type="button" class="btn btn-info"   @click="ocrRec(32)" :style="ocrButtonShow">发票分区（数据）</button>
   <button class="btn btn-primary" type="button" disabled :style="loadingButtonShow">
      <span class="spinner-border spinner-border-sm" role="status" ></span>
      OCR识别计算中...
   </button>

   <div ref="v2_1" :styple="contentShow">
      <span v-if="invoiceType === 7">类型验证：{{ocrResult.type}} ==> {{ocrResult.typeDesc}}</span>
      <pre v-if="formattedJson"> {{ocrResult}}</pre>
      <span>{{textResult}}</span>
   </div>

   <div ref="v2_2" :styple="contentShow">
      <template v-for="(item,index) in ocrOriginalList">
         <li>{{item}}</li>
      </template>
   </div>



</div>

</body>
<script>

    var v = new Vue({
        el: "#app",
        data: {
            fsList:[],
            parentDir:"",
            currentDir:"",
            imgPath:"",
            ocrResult:"",
            formattedJson:true,
            loadingButtonShow:"display:none;",
            ocrButtonShow:"display:inline;",
            totalTime:"",
            ocrOriginalList:[],
            invoiceType:"",
            textResult:"",
        },

        methods: {


            fsDownload(relativePath){
                window.location.href="/release/fs/download?relativePath="+relativePath;
            },
           // 图片识别计算
            ocrRec(opType){
               alert("确认要执行？")
               let  vueObj = this;
               // 展现
               vueObj.loadingButtonShow="display:inline;"
               // 隐藏
               vueObj.ocrButtonShow="display:none;"
               // 显示区内容清空
               vueObj.ocrOriginalList=[]
               vueObj.ocrResult=""

               // url encode
               const imgPath =encodeURIComponent(vueObj.imgPath);
                  // v2.1类型
                  if(opType == 1){
                     // url encode
                     axios.get("/ocr/test/rec/v2_1?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                         vueObj.ocrResult = resp.data.data;
                         vueObj.totalTime = resp.data.data.totalTime;
                         // 隐藏 loading
                         vueObj.loadingButtonShow="display:none"
                         // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 2){
                     // url encode
                     axios.get("/ocr/test/rec/v2_2?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrOriginalList = resp.data.data.ocrRet;
                        vueObj.totalTime = resp.data.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })

                  }else if(opType == 3){
                     // url encode
                     axios.get("/ocr/test/rec/v2_3?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })

                  }else if(opType == 4){
                     // url encode
                     axios.get("/ocr/test/rec/v2_4?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data.ocrRet;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })

                  }else if(opType == 6){
                     // url encode
                     axios.get("/ocr/test/rec/v2_6?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data.ocrRet;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 7){
                     vueObj.invoiceType = "";
                     // url encode
                     axios.get("/ocr/test/rec/v2_7?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        // 显示类型
                        vueObj.invoiceType = 7;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 8){
                     vueObj.invoiceType = "";
                     // url encode
                     axios.get("/ocr/test/rec/v2_8?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 9){
                     vueObj.invoiceType = "";
                     // url encode
                     axios.get("/ocr/test/rec/v2_9?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 31){
                     vueObj.invoiceType = "";
                     // url encode
                     axios.get("/ocr/test/rec/v3_1?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }else if(opType == 32){
                     vueObj.invoiceType = "";
                     // url encode
                     axios.get("/ocr/test/rec/v3_2?imgPath="+imgPath+"&opType="+opType).then(function (resp) {
                        vueObj.ocrResult = resp.data;
                        vueObj.totalTime = resp.data.totalTime;
                        // 隐藏
                        vueObj.loadingButtonShow="display:none"
                        // 显示点击button
                        vueObj.ocrButtonShow="display:inline;"

                     })
                  }
            } ,




        },
        mounted: function () {
           let vueObj = this;
           // 初始化识别的图片位置
           vueObj.imgPath = this.$refs.imgPathId.value;
            //this.ocrRec(vueObj.imgPath);
        },

    })


</script>

</html>